<template>
    <hb-input class="topest"
        @ipt="e_ipt"
        @focuing="e_focu"
        formType="password"
        :back="back"
        @etr="$emit('etr')">
        <div class="help pos-ab bb"
            :class="{die: !focuing}">
            <div class="fcc">
                <div class="strong">
                    <div class="strongLine animation"
                        :style="`width: ${strongLineLong}%;`"></div>
                </div>
                <span v-text="msgh.weak[lang]" />
            </div>
            <div class="tips flex">
                <span class="icon fcc"
                    :class="checkLongResult ? 'green' : 'red'"
                    v-text="checkLongResult ? '✓' : '!'" />
                <span v-text="msgh.length[lang]" />
            </div>
            <div class="tips flex">
                <span class="icon fcc"
                    :class="checkSimpleResult ? 'green' : 'red'"
                    v-text="checkSimpleResult ? '✓' : '!'" />
                <span v-text="msgh.simple[lang]" />
            </div>
        </div>
    </hb-input>
</template>

<script>
import {rules, msgs} from './rule'

export default {
	props: {
		hiddTip: {
			default: false,
		},
		back: {
			default: 'password',
		},
	},
	data() {
		return {
			inputed: '',
			focuing: false,
			strongLineLong: 0,
			msgh: msgs.passwordHelp,
			checkLongResult: false,
			checkSimpleResult: false,
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	created() {},
	methods: {
		e_focu(b) {
			if (!this.hiddTip) {
				this.focuing = b
			}
		},
		e_ipt(re, inputed) {
			this.inputed = inputed
			this.check()
			this.$emit('ipt', re, inputed, this.back)
		},
		check() {
			let re = false
			let s = this.inputed

			let re0 = this.checkLong(s)
			let re1 = this.checkSimple(s)
			re = re0 && re1

			this.setStrongLine(re0, re1)

			this.iptType = re ? '' : 'err'
			this.$emit('ipt', re, this.inputed, this.back)
		},
		checkLong(s) {
			let len = s.length
			let re = false
			if (len > 7 && len < 21) {
				re = true
			}
			this.checkLongResult = re
			return re
		},
		checkSimple(s) {
			let re = true
			if (s.match(/^\d+$/) || s.match(/^[a-zA-Z]+$/)) {
				re = false
			}
			if (s === '') {
				re = false
			}
			this.checkSimpleResult = re
			return re
		},
		setStrongLine(re0, re1) {
			let c = 0
			let s = this.inputed
			if (re0) {
				c++
			}
			if (re1) {
				c++
			}
			if (s.length > 12) {
				c++
			}
			if (s.match(/[^\da-zA-Z]/)) {
				c++
			}

			let re = (c / 4 * 100) | 0
			this.strongLineLong = re
			return
		},
	},
}
</script>

<style scoped>
.topest {
	--bgclr: #262a42;
}

.help {
	top: -3px;
	left: 0;
	transform: translateY(-100%);
	box-shadow: 0 3px 5px #1f1f2e;
	border-radius: 4px;
	padding: 5px 15px;
	min-width: 122px;
	min-height: 20px;
	background-color: var(--bgclr);
	font-size: 14px;
	color: rgb(255, 255, 255);
}
.strong {
	margin-right: 15px;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid green;
	width: 150px;
	height: 12px;
}
.strongLine {
	width: 20%;
	height: 100%;
	background-color: green;
}

.tips {
	margin: 10px 0;
	align-items: center;
}
.icon {
	margin-right: 5px;
	overflow: hidden;
	border-radius: 10px;
	width: 16px;
	height: 16px;
	color: var(--bgclr);
	font-weight: 900;
}
.green {
	background-color: green;
}
.red {
	background-color: rgb(174, 78, 84);
}
</style>